<template>
  <div class="basic-information">
    <el-form
      ref="businessRef"
      label-width="100px"
      size="mini"
      :model="business"
      class="form"
      :rules="businessRules"
    >
      <el-form-item :label="$t('market.settleCurr')" prop="ftradingCurrId">
        <el-autocomplete
          v-model.trim="business.ftradingCurr"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch5"
          size="mini"
          :popper-append-to-body="false"
          :disabled="formDisabled"
          @focus="queryTBdCurrency"
          @select="currencyData"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="currencyVisiblit=true"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.saler')" prop="fsellerId">
        <el-autocomplete
          v-model.trim="business.fseller"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch3"
          :disabled="formDisabled"
          :popper-append-to-body="false"
          @focus="querySalesperson(1)"
          @select="marketData"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="marketVisiblit=true"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fuserName }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.settleType')" prop="fsettleTypeId">
        <el-autocomplete
          v-model.trim="business.fsettleType"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_SETTLETYPE')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_SETTLETYPE')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item
        :label="$t('market.recCondition')"
        prop="freccondiTionId"
      >
        <el-autocomplete
          v-model.trim="business.freccondiTion"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_V_SAL_COLLECTION')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_V_SAL_COLLECTION')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.maxDiscount')" prop="fdiscountlist">
        <el-input
          v-model.number="business.fdiscountlist"
          :disabled="formDisabled"
        />
      </el-form-item>
      <el-form-item :label="$t('market.translead')" prop="ftransleadTime">
        <el-input
          v-model.number="business.ftransleadTime"
          :disabled="formDisabled"
        />
      </el-form-item>
      <el-form-item :label="$t('market.taxType')" prop="ftaxType">
        <el-autocomplete
          v-model.trim="business.ftaxTypeName"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_TAXTYPE')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_TAXTYPE')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.invoiceType')" prop="finvoiceType">
        <el-autocomplete
          v-model.trim="business.finvoiceTypeName"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_INVOICETYPE')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_INVOICETYPE')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.taxrate')" prop="ftaxRate">
        <el-autocomplete
          v-model.trim="business.ftaxRateName"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_V_UNIT_TAXRATEID')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_V_UNIT_TAXRATEID')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
    </el-form>
    <!--销售员列表-->
    <market v-if="marketVisiblit" @market="marketData" />
    <!--结算币别列表-->
    <currency v-if="currencyVisiblit" @currency="currencyData" />
    <!--  数据字典弹窗  -->
    <unit v-if="unitVisabled" :msg="funit" @unit="selUnit" />
  </div>
</template>

<script>
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'

export default {
  name: 'Index',
  components: {
    market: () => import('@/views/market/marketManage/createMarkerOrder/components/market'),
    unit: () => import('@/views/basic/createMateriel2/components/unit'),
    currency: () => import('@/views/market/marketManage/createMarkerOrder/components/currency')
  },
  mixins: [autocomplete],
  props: {
    business: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    },
    formDisabled: {
      type: Boolean,
      default: false
    },
    isIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      funit: '',
      unitVisabled: false,
      ftype: 2052,
      fbillNo: 'fname', // 名称
      marketVisiblit: false, // 销售员弹窗
      currencyVisiblit: false, // 结算币别弹窗
      total: 0, // 总条目
      businessRules: {
        ftradingCurrId: [
          {
            required: true,
            message: '请选择结算币别',
            trigger: 'change'
          }
        ],
        fsellerId: [
          {
            required: true,
            message: '请选择销售员',
            trigger: 'change'
          }
        ],
        finvoiceType: [
          {
            required: true,
            message: '请选择发票类型',
            trigger: 'change'
          }
        ],
        ftaxRate: [
          {
            required: true,
            message: '请选择默认税率',
            trigger: 'change'
          }
        ],
        fsettleTypeId: [
          {
            required: true,
            message: '请选择结算方式',
            trigger: 'change'
          }
        ],
        freccondiTionId: [
          {
            required: true,
            message: '请选择收款条件名称',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    handleBusinessRef() {
      let businessId = null
      this.$refs.businessRef.validate(valid => {
        if (valid) {
          businessId = true
        } else {
          businessId = false
        }
      })
      return businessId
    },
    // 获取销售员数据(子传父)
    marketData(item) {
      if (item.fuserId) {
        this.business.fseller = item.fuserName
        this.business.fsellerId = item.fuserId
      }
      this.marketVisiblit = false
    },
    // 获取结算币别数据(子传父)
    currencyData(item) {
      if (item.fsettleCurrId || item.fcurrencyId) {
        this.business.ftradingCurr = item.fsettleCurrIdName || item.fname
        this.business.ftradingCurrId = item.fsettleCurrId || item.fcurrencyId
      }
      this.currencyVisiblit = false
    },
    // 数据字典弹窗
    cliUnit(ev) {
      this.funit = ev
      this.unitVisabled = true
    },
    // 数据字典选中
    selUnit(ev) {
      if (ev.fid) {
        if (this.funit === 'SX_SETTLETYPE') { // 结算方式
          this.business.fsettleType = ev.fname
          this.business.fsettleTypeId = ev.fid
        } else if (this.funit === 'SX_INVOICETYPE') { // 发票类型
          this.business.finvoiceTypeName = ev.fname
          this.business.finvoiceType = ev.fid
        } else if (this.funit === 'SX_TAXTYPE') { // 税分类
          this.business.ftaxTypeName = ev.fname
          this.business.ftaxType = ev.fid
        } else if (this.funit === 'SX_V_UNIT_TAXRATEID') { // 默认税率
          this.business.ftaxRateName = ev.fname
          this.business.ftaxRate = ev.fid
        } else if (this.funit === 'SX_V_SAL_COLLECTION') { // 收款条件
          this.business.freccondiTion = ev.fname
          this.business.freccondiTionId = ev.fid
        }
      }
      this.unitVisabled = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.el-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 30px;
    width: 275px;
    margin-bottom: 5px;
    &::v-deep .el-input--mini .el-input__inner{
      max-width: 178px;
    }

    .el-date-editor.el-input {
      width: 100% !important;
    }

    .el-select {
      width: 100%;
    }
  }
}
.el-icon-search {
  cursor: pointer;
}
.public-form {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom: 20px;
  position: relative;
  .search-btn {
    transform: translateY(18%);
    margin-left: 450px !important;
    z-index: 999;
  }
}
.dialog-class ::v-deep .el-dialog__body {
  padding: 10px 20px;
}
</style>
